<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="js/changeUrlImage.js"></script>
<%if((String)session.getAttribute("username") == null){ %>
	<jsp:forward page="index.jsp"></jsp:forward>
<%} %>
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">AR BUSINESS CARD</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">Home</a></li>
				<!-- <li><a href="#about">About</a></li> -->
				<li><a href="contact.jsp">Contact</a></li>
				<li><a href="create_card.jsp">Create card</a></li>
				<li><a href="#">Download</a></li>


			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li>
					<div class="welcome">Welcome ${sessionScope.username}</div>
				</li>

			</ul>

		</div>
		<!--/.nav-collapse -->
	</div>
	</nav>
	<form method="post" action="createcard">
	<div class="container bg">
		<div style="margin-top: 35px">
			<div class="row">
				<h3>CHOSE CARD MODEL</h3>
			</div>


			<div class="row">
				<div class="btn-group" data-toggle="buttons">
					<label class="btn btn-primary active"> <input type="radio"
						name="options" id="option1" value="m01_apron_00_h"
						autocomplete="off" checked
						onChange="changeUrl('images/model/m01_apron_00_h.png');">Apron
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option2" value="m01_blazer_000_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_blazer_000_h.png');">
						Blazer
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_casualwear_00_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_casualwear_00_h.png');">
						Casualwear_00
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_casualwear_01_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_casualwear_01_h.png');">
						Casualwear_01_h
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_jersey_00_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_jersey_00_h.png');">
						Jersey
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_schoolwear_000_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_schoolwear_000_h.png');">
						SchoolWear_000_h
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_schoolwear_200_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_schoolwear_200_h.png');">
						Schoolwear_200_h
					</label> <label class="btn btn-primary"> <input type="radio"
						name="options" id="option3" value="m01_schoolwear_400_h"
						autocomplete="off"
						onChange="changeUrl('images/model/m01_schoolwear_400_h.png');">
						Schoolwear_200_h
					</label>

				</div>
			</div>
			<hr>
			<div class="row">
				<img src="images/model/m01_apron_00_h.png" class="img_model"
					id="img_model">

			</div>
			<hr>
			<div class="row">
				<button type="submit" class="btn btn-primary right">Create</button>
				<button type="button" class="btn btn-success right"
					style="margin-right: 10px">Preview</button>
			</div>
		</div>
	</div>
	<!-- /.container -->
	<hr>
	</form>
	
	<footer style="background-color: #123322;min-height:50px">
	<p class="pull-right">
		<a href="#">Back to top</a>
	</p>
	<p>
		© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a>
	</p>
	</footer>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
